.first{
  @media screen and(min-width:1440px)  {
  width: 1440px;
  height: 771px; 
  background: url(./assets/firset.svg);
  }
  @media screen and(max-width:1440px)  {
    width: 100vw;
   
    }

       .headd{
         display: flex;
         justify-content: space-around;
         align-items: center;
         padding-top: 3vh;
         .logo{
          @media screen and(max-width:1440px)  {
              width: 20vw;
              height: 8vh;
            }
         }
         .daohang{
          display: flex;
          justify-content: space-around;
          div{
            margin: 1px;
            border-radius: 5%;
            overflow: hidden;
            @media screen and(min-width:1440px)  {
              width: 177px;
              height: 55px;
              font-size: 24px;
              color: #fff;
              }
              @media screen and(max-width:1440px)  {
                width: 8em;
                height: 4em;
                font-size: 2vw;
                color: #000000;
               
                }
            
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
         
          }
          div:hover{
            @media screen and(min-width:1440px)  {
              background-color: #1e1e1e;
              }
              @media screen and(max-width:1440px)  {
                background-color: #fff;
               
                }
             
          }
          .fb{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #1e1e1e;
          }
         }
       }
       .text{

      
        @media screen and(min-width:1440px) {
          color: #fff;
          margin-left: 10%;
          div{
            margin-top: 1em;
            margin-bottom: 1em;
          }
          .to{
            font-size: 48px;
          }
          .tw{
            font-size: 56px;
            
          }
          .tt{
            font-size: 24px;
            width: 22em;
          }
          .tf{
            background-color: #1e1e1e;
            border-radius: 5%;
            width: 6em;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 3em;
            font-size: 16px;
          }
          
        }
        @media screen and(max-width:1440px){
          color: #000000;
          .tf{
            background-color: #fff;
            cursor: pointer;
            width: 30vw;
            border-radius: 5%;
            text-align: center;
            margin-left: 35vw;
          }
        }

       }
}
.second{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 20vh;
  width: 100%;
  .ss{
    display: flex;
    align-items: center;
 
    margin-top: 2em;
    @media screen and(min-width:1440px){
      width: 70%;
      margin-right: 10%;
    }
    @media screen and(max-width:1440px){
      width: 100%;
      font-size: 3vw;
    }
    div{
      height: 1.5em;
      @media screen and(min-width:1440px){
        background-color: #4D4DDB;
        color: #fff;
      }
      @media screen and(max-width:1440px){
     
        color: #1e1e1e;
      }
    }
  }
  div{
    display: flex;
    @media screen and(min-width:1440px){
      width: 80%;
    }
    @media screen and(max-width:1440px){
      width: 100%;
      font-size: 3vw;
    }
    height: 3em;
    justify-content: space-around;
    width: 80%;
    div{
      border-radius: 6%;
      @media screen and(min-width:1440px){
        font-size: 20px;
        border: 1px solid #4D4DDB;
      }
      @media screen and(max-width:1440px){
        font-size: 3vw;
        border: 0px solid #4D4DDB;
      }
   
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #4D4DDB;
    }
    .zhaogongzuo{
      background-color: #4d4ddb;
      color: #fff;
    }
  
  }
}
.third{
  align-items: center;
  background: url(./assets/third.svg);
  justify-content: space-between;
  .tl{
    margin-top: 10%;
    align-items: center;
    display: flex;
    @media screen and(min-width:1440px){
      width: 50%;
    }
    @media screen and(max-width:1440px){
      width: 100%;
      margin-left: -5%;
    }
    justify-content: space-around;
    .tlw{
      width: 50%;
    }
  }
  .tr{
    @media screen  and(max-width:1440px){
      display: none;
    }
    @media screen and(min-width:1440px){
     font-size: flex;
    }
    
    flex-direction: column;
    align-items: center;
    width: 50%;
    div{
      margin-top: 1em;
      margin-bottom: 1em;
    }
    .trt{
      @media screen and(max-width:1440px){
        font-size: 48px;
        margin-left: -28%;
      }
      @media screen and(min-width:1440px){
        font-size: 48px;
        margin-left: 10%;
      }
    }
    .trz{
      max-width: 30em;
      @media screen and(min-width:1440px){
        font-size: 16px;
        
      }
      @media screen and(max-width:1440px){
        font-size: 3vw;
        
      }
    }
  }
  @media screen and(min-width:1440px)  {
    display: flex;
    width: 1440px;
    height: 946px;
    color: #fff;
    .kuai{
      margin-top: 10%;
      width: 305px;
      height: 193px;
      background-color: #17175C;
      font-size: 14px;
      div{

        margin-left: 1em; 
        margin-right: 1em; 
      }
    }
    .img{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color:#fff ;
      border-radius: 100%;
      width: 51px;
      height: 51px;
    }
    }
  @media screen and(max-width:1440px)  {
    display: block;
      width: 136vw;
      color: #fff;
      .kuai{
        margin-top: 10%;
        width: 40vw;
        height: 26vw;
        background-color: #17175C;
        font-size: 0.5vw;
        div{
  
          margin-left: 1em; 
          margin-right: 1em; 
        }
      }
      .img{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color:#fff ;
        border-radius: 100%;
        width: 5vw;
        height: 5vw;
      }
      }
}
.four{
  @media screen and(min-width:1440px){
    display: flex;
  }
  @media screen and(max-width:1440px){
    display: block;
  }
  align-items: center;

  width: 100%;
  div{
    @media screen and(min-width:1440px){
      width: 50%;
    }
    @media screen and(min-width:1440px){
      width: 100%;
    }
  }
  .fourr{
    display: flex;
    flex-direction: column;
    @media screen and(min-width:1440px){
      padding-left: 10%;
    }
    @media screen and(max-width:1440px){
      padding-left: 15%;
    }
    div{
      div{
        margin: 1em 0;
      }
    }
    .fourrt{
      @media screen and(min-width:1440px){
        font-size: 48px;
        width: 6em;
      }
      @media screen and(min-width:1440px){
        font-size: 3vw;
        width: 6em;
      }
      
    }
    
    .fourrz{
      width: 36em;
      font-family: Regular;
      @media screen and(min-width:1440px){
        font-size: 16px;
  
      }
      @media screen and(max-width:1440px){   
      font-size: 2vw;

      }
      
    }
  }
  .fourl{
    display: flex;
    justify-content: center;
    .cheng{
      height: 2em;
    }
    .zujian{
    
      @media screen and(min-width:1440px){
        width: 305px;
        height: 193px;
        margin-top: 2em;
      }
      @media screen and(max-width:1440px){
        width: 90%;
        height: 40%;
        margin-top: 1em;
      }

    }
  }

}
.five{ 
  align-items: center;
  justify-content: center;
  @media screen and(max-width:1440px){
    width: 136vw;
    height: 45vh;
    display: block;
    color: #000000;
  }
  @media screen and(min-width:1440px){
    background: url(./assets/five.svg);
    width: 100%;
    height: 1122px;
    display: flex;
    color: #fff;
  }


  div{
  @media screen and (min-width:1440px) {
    width: 50%;
  }
  @media screen and (max-width:1440px) {
    width: 100%;
  }
   div{
    display: block;
    margin: 2em 2em;

   }
   .f1{
    width: 100%;
        @media screen and (min-width:1440px) {
          font-size: 36px;
        }
        @media screen and (max-width:1440px) {
          font-size: 5vw;
        }
   }
   .f2{
    width: 28em;
        @media screen and (min-width:1440px) {
          font-size: 20px;
        }
        @media screen and (max-width:1440px) {
          font-size: 2vw;
        }
   }
   .f3{
    width: 8em;
    height: 3em;
    border-radius: 10%;

    display: flex;
    align-items: center;
    justify-content: center;
    @media screen and (min-width:1440px) {
      font-size: 20px;
      background-color: #1e1e1e;
    }
    @media screen and (max-width:1440px) {
      font-size: 2vw;
      background-color: #fff;
      margin-left: 13em;
    }
}
   }
  }
.six{
  display: flex;
  justify-content: space-around;
  align-items: center;
  @media screen and(min-width:1440px) {

    .xiaojiejie2{
      display: none
    }
  }
  @media screen and(max-width:1440px) {
    margin-top: 5vh;
    img{
      width: 29%;
      display: block;
    }
  }
  .xiaojiejie{
    @media screen and(min-width:1440px){
      width: 554px;
      height: 586px;
      margin-top: -101px;
      margin-left: 123px;
    }
    @media screen and(max-width:1440px){
    display: none;
    }
    img{
      width: 100%;
    }
  
  }
  .pingjia{
    @media screen and(min-width:1440px){
      font-size: 48px;
    }
    @media screen and(max-width:1440px){
      font-size: 5vw;
    }
    
  }
  .pp{
    width: 36em;
    @media screen and(min-width:1440px){
      font-size: 20px;
    }
    @media screen and(max-width:1440px){
      font-size: 2vw;
    }
  }
}
.last{
  background: url(./assets/last.svg);
  @media screen and(max-width:1440px){
    background-color: #1e1e1e;
    margin-top: 10vh;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .ltl{
      display: none;
    }
    
  }
  @media screen and(min-width:1440px){
    height: 904px;
    width: 1440px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .ltt{
    margin-top: 1em;
    color: #fff;
    @media screen and(max-width:1440px){
      font-size: 4vw;
      display: flex;
      justify-content: center;
     
    }
    @media screen and(min-width:1440px){
      font-size: 32px;
  
    }
  }
  .lt{
    margin-top: 1em;
    color: #fff;
    @media screen and(max-width:1440px){
      font-size: 1vw;

    }
    @media screen and(min-width:1440px){
      font-size: 20px;
     
    }
  }
  .lemail{
    @media screen and(min-width:1440px){
      width: 384px;
      height: 55px;
      padding: 0 5% 0 0;
      justify-content: space-around;
    }
    @media screen and(max-width:1440px){
      height: 5vh;
      margin-left: 5%;
      width: 95%;
      justify-content: center;
    }
  
    display: flex;
    
    border: 1px solid #fff;
    border-radius: 5%;
  }
  .yyx{
    color: #fff;
    height: 95%;
    width: 60%;
    background-color: #000000;
    border: 1px solid #fff;
    border-left: none;
    border-right: none;
    font-size: 24px;  
  }
  .yyx::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
    color:#fff;
    font-size:24px;
    }
  .ltj{
    cursor: pointer;
    justify-content: center;
    width: 8em;
    height: 100%;
    color: #fff;
    background-color: #4D4DDB;
    font-size: 24px;
    display: flex;
    align-items: center;
  }

}

*{
  @media screen and(max-width:1440px){
    font-size: 3vw;
  }
    margin: 0,auto;
    padding: 0;
}
body{

    margin: 0;
    padding:0;
    width: 100vw;
}
.rmain{
  @media screen and(max-width:1440px) {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-items: center;
  }
}
.rmain>div{
  @media screen and(max-width:1440px) {
    margin-top: 4em;
    
   }
   @media screen and(min-width:1440px) {
    margin-top: 10px;
    margin-bottom:20px ;
   }
 
}
#app{
  margin: 0;
    height: 100%;
}
.app{
    height: 100%;
    display: flex;
    justify-content: center;

}
.main{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    @media screen and(max-width:1440px) {
      width: 100%;
    }
    @media screen and(min-width:1440px) {
      width: 1440px;
    } 
    .left{
      @media screen and(max-width:1440px) {
       display: none;
      } 
        width: 50%;
        height: 100%;
        background-color: #9A9AEB;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .right{
      @media screen and(max-width:1440px) {
        width: 100%;
       } 
       @media screen and(min-width:1440px) {
        width: 50%;
       } 
      
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.ruo {
    color: red;
  }
  .middle {
    color: orange;
  }
  .strong {
    color: greenyellow;
  }
  .rightc {
    display: flex;
    align-items: center;
    flex-flow: column;
    width: 100%;
    height: 100%;
    justify-content: center;
  }
  .zc > div {
    margin-top: 25px;
  }
  .dl {
    @media screen and(max-width:1440px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
     } 
  }
  
  .dl> div {
   
    @media screen and(min-width:1440px) {
      margin-top: 25px;;
     } 
    @media screen and(max-width:1440px) {
      margin-top: 5vh;;
     } 
  }
  .rtop {
    text-align: center;
    height: 1em;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    text-shadow: 0px 0px 0px black, 0px 1px 3px black;
   
    @media screen and(min-width:1440px) {
      font-size: 32px;
    }
    @media screen and(max-width:1440px) {
      font-size: 6vw;
    }
  }
  .in {
    @media screen and(min-width:1440px) {
      height: 103px;
      width: 446px;
     
    }
    @media screen and(max-width:1440px) {
      display: flex;
      align-items: center;
     flex-direction: column;
      height: 10vh;
      width: 80%;
      font-size: 3vw;
    }
 
  }
  #mm {
    @media screen and (min-width:1440px){
      -web-kit-appearance: none;
      -moz-appearance: none;
      border: 1px solid #4d4ddb;
      border-radius: 5px;
      outline: 0;
      width: 446px;
      height: 55px;
      font-size: 20px;
    }
    @media screen and (max-width:1440px){
      -web-kit-appearance: none;
      -moz-appearance: none;
      border: 1px solid #4d4ddb;
      border-radius: 5px;
      outline: 0;
      width: 80%;
      height:10vh;
      font-size: 10vw;
    }

  }
  .eyes {
    @media screen and (min-width:1440px){
      position: relative;
      top: -43px;
      right: -400px;
    }
    width: 30px;
    height: -57px;

    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .xz {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  
  .login {
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    @media screen and (min-width:1440px){
      width: 446px;
      height: 55px;
    }
    @media screen and (max-width:1440px){
      margin-left: 10%;
      width: 80%;
      height: 55px;
    }
    width: 446px;
    height: 55px;
    color: #ffffff;
    background-color: #1e1e1e;
    text-align: center;
    font-size: 20px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
  }
  .qiehuan {
    color: #4d4ddb;
    cursor: pointer;
  }
  .zzz {
    text-align: center;
  }
  .zzzz {
    text-align: center;
    display: flex;
    justify-content: space-between;
  }
  .mm {

    @media screen and(min-width:1440px) {
      height: 180px;
     } 
    @media screen and(max-width:1440px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 10vh;
     } 
  }
  
.el-icon{
   height: 30px !important;
   width: 30px !important;
}
.zzz{
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.zzz>div>span{
    color: #4d4ddb;
    cursor: pointer;
}
.headimg{
  cursor: pointer;
  height: 160px;
  width: 160px;
  border-radius: 100%;
  overflow: hidden;

}
.myinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.headimg>img{
     height: 100%;
}
select{
  margin-top:10px ;
  -web-kit-appearance: none;
-moz-appearance: none;
border: 1px solid #4d4ddb;
outline: 0;
@media screen and(min-width:1440px){
  width: 446px;
height: 55px;
font-size: 20px;
text-align: center;
}
@media screen and(max-width:1440px){
width:80%;
height: 7vh;
font-size: 2vw;
text-align: center;
}

}
.login2 {
  margin-top: 10px;
  cursor: pointer;
  display: flex;
  width: 177px;
  height: 55px;
  color: #ffffff;
  background-color: #1e1e1e;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
}
.box{
  font-size: 24px;
  font-weight: 500;
  height: 103px;
  width: 446px;
 
  @media screen and (min-width:1440px){
    font-size: 24px;
  font-weight: 500;
  height: 103px;
  width: 446px;
  margin-top: 5px;
  }
  @media screen and (max-width:1440px){
    font-size: 3vw;
    font-weight: 500;
    height: 10vh;
  width: 80%;
  margin-top: 5vh;
  }
  input{
    border-radius: 5px;
  }
  select{
    border-radius: 5px;
  }
}
.con{
  @media screen and (min-width:1440px){
    width: 1440px;
  }
  @media screen and (max-width:1440px){
    width: 100%;
  }
  margin: 0;
  background-color: #E6E6FA;
  height: auto;
}
.header{
  padding-top: 3%;
  display: flex;
  justify-content: space-evenly;
  .logo{
    @media screen and (max-width:1440px){
      display: none;
    } 
  font-size: 48px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contant{
    width: 100%;
    align-items: center;
    display: flex;
    justify-content:  space-around;
    div{
      @media screen and (max-width:1440px){
        font-size: 0.5vw;
        width: 28em;
        height: 12em;
      } 
       @media screen and (min-width:1440px){
        font-size: 1.5rem;
        width: 177px;
        height: 55px;
    
      }
      cursor: pointer;
      
      display: flex;
      color: #fff;

      justify-content: center;
      align-items: center;
    }
    div:hover{
      background-color: #1e1e1e;
      border-radius: 5%;
    }
  }
}
.phone{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shouji{
  @media screen and (min-width:1440px){
    margin-left: 2px;
    width: 56px!important;
    height: 56px!important;
    border: 1px solid #4D4DDB;
    border-right:1px solid black;
  }

  display: flex;
  justify-content: center;
  align-items: center;height: 100%;
  border-top-left-radius: 5px; 
  border-bottom-left-radius: 5px; 
}
.myphone{
  @media screen and (max-width:1440px){
  margin-right: 16%;
  }
}